<template>
    <div class="list">
        <el-backtop>
            <div>
                回到顶部
            </div>
        </el-backtop>
        <!-- {{list}} -->
        <div class="lists" v-for="item in list" :key="item.Id">
            <div class="imgTop">
                <router-link :to="'/detail'+item.Id">
                    <el-image style="width: 100%; height: 100%" :src="item.imageUrl" fit="fill"></el-image>

                </router-link>
            </div>
            <h2>{{item.title}}</h2>
            <span class="span1">￥ 119</span> <span class="span2">爆品</span> <span>一起拼</span>
        </div>
        <p v-show="!isOk">正在加载中。。。。。。</p>

        <el-image style="width: 100%; height: 100%" :src="require('@/assets/footer.png')" fit="fill"></el-image>
        <div class="scr">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isOk: true,
            timer: "",
        };
    },
    props: {
        list: Array,
        onBottom: Function,
    },
    mounted() {
        window.addEventListener("scroll", this.scrollEvent, false);
    },
    methods: {
        scrollEvent() {
            if (
                document.documentElement.scrollTop +
                    document.documentElement.clientHeight >=
                document.body.scrollHeight
            ) {
                if (this.isOk) {
                    this.$emit("onBottom");
                    this.isOk = false;
                } else {
                    this.open1();
                }
                this.timer = setTimeout(() => {
                    // this.$emit("onBottom");
                    this.isOk = true;
                }, 5000);
            }
        },
        open1() {
            const h = this.$createElement;

            this.$notify({
                title: "标题名称",
                message: h(
                    "i",
                    { style: "color: teal" },
                    "三秒中只能加载一次哦"
                ),
            });
        },
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollEvent, false);
        clearTimeout(this.timer);
    },
    // watch:{
    //     list(){
    //         console.log(11111111111111111);
    //     }
    // }
};
</script>

<style lang="scss" scoped>
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .lists {
        border: 1px solid green;
        width: 210px;
        height: 280px;
        margin-top: 20px;
        overflow: hidden;
        .imgTop {
            width: 210px;
            height: 200px;
        }
        h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }
        span {
            color: red;
            display: inline-block;
            line-height: 30px;
        }
        .span1 {
            padding-right: 70px;
        }
        .span2 {
            background-color: #ab7fd1;
            color: white;
        }
    }
}
</style>